<template lang='pug'>
.spring-frame(@click.self="$emit('close')")
    .content
        .top() 共{{data.length}}条评论
            span(@click="$emit('close')").icon-cuo.iconfont
        ul.aul
            li(v-for="d in data" :key="d.id") 
                .p
                    img(:src="d.pluserimg")
                    .box
                        .con
                            span {{d.plusername}} 
                            p {{d.newTime}}
                        main {{d.plContent}}
                    time {{d.good}}
                        span.iconfont.icon-zan
    .bottom
        input(type="text" placeholder='✏来说点什么')
</template>
 
<script>
export default {
  name: "vueName",
  props: ['obj'],
  data() {
    return {
      data: []
    };
  },
  created(){
      let c = JSON.parse(JSON.stringify(this.obj))
      this.data = c.sort((a,b)=> b.good - a.good);
  }
};
</script>
 
<style scoped lang="sass">
.spring-frame
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: rgba(0,0,0,.5)
    z-index: 9
    .bottom
        position: fixed
        bottom: 0
        width: 100%
        height: .5rem
        border-top: .5px solid #ddd
        display: flex
        justify-content: center
        align-items: center
        background: #fff
        input
            width: 95%
            background: #f6f6f6
            height: 70%
            border-radius: .2rem
            padding-left: .2rem
    .content
        min-height: 1rem
        min-height: 3rem
        width: 100%
        background: #fff
        position: absolute
        bottom: 0
        border-radius: .1rem .1rem 0 0 
        padding: .1rem
        .top
            width: 100%
            text-align: center
            position: relative

            &>span
                position: absolute
                right: 0
                top: .02rem
        .aul
            width: 100%
            max-height: 3rem
            // background: #000
            overflow: hidden
            overflow-y: scroll
            li
                width: 100%
                height: .8rem
                margin-top: .3rem
                backgroud: #ccc
                .p
                    width: 100%
                    display: flex
                    align-items: center
                    .box
                        width: 80%
                        height: 100%
                        margin-left: .05rem
                        .con
                            display: flex
                            align-items: center
                    img
                        width: .3rem
                        height: .3rem
</style>